<template>
    <div class="main">
        <Pointwave :color="0xb1803e"/>
        <div>
            <div v-if="loading" style="position: absolute; width: 100%;height: 150px;">
                <hu-loading type="circular" />
            </div>
            <div id="backimg" onselectstart="javascript:return false;"></div>
            <div @click="clickBox()" id="box" onmousedown="mousedown(event)" onselectstart="javascript:return false;"></div>
            <div id="logo">
                <img class="img" src="../../assets/logo/logo.png" width="50px">
            </div>
            <input type="text" placeholder="登录" v-model="loginBody.userName" @click="clickUsername()" @mouseover="mouseOverUsername()"
                @mouseleave="mouseLeaveUsername()" id="username-input" onselectstart="javascript:return false;"
                autocomplete="off" />
            <input type="password" placeholder="输入密码" v-model="loginBody.password" @click="clickPassword()" @mouseOverPassword="mouseOverPassword()"
                @mouseLeavePassword="mouseLeavePassword()" @keyup.enter="login()" id="password-input"
                onselectstart="javascript:return false;" autocomplete="off" />
            <div id="tip" onselectstart="javascript:return false;">「 输入密码后敲击 Enter 登录 」</div>
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import {login} from '@/api/auth'
import {setToken} from '@/utils/auth'
import Pointwave from '@/components/Pointwave/index.vue'
export default
    {
        name: '',
        components:
        {
            Pointwave
        },
        mixins: [],
        props: [

        ],
        data() {
            return {
                loading: false,
                loginBody: {
                    userName: 'os-admin',
                    password: 'os-admin',
                },
                redirect: ''
            }
        },
        computed:
        {

        },
        created() {

        },
        mounted() {

        },
        watch:
        {
            $route:
            {
                handler: function (route) {
                    // 需要进行解码
                    let redirectPath = decodeURIComponent(route.fullPath).split('redirect=')[1]
                    this.redirect = redirectPath
                },
                immediate: true
            }
        },
        methods: {
            /* 登录 */
            login() {
                this.loading = true
                this.$store.dispatch('user/login',this.loginBody).then((res) => {
                    this.loading = false
                    this.$router.push(this.redirect || '/')
                }).catch((error)=>{
                    this.loading = false
                    this.$huTip({type:"error", value: error})
                })
                
            },
            /* 改变placeholder */
            mouseOverUsername() {
                document.getElementById("username-input").placeholder = "用户名"
            },
            /* 点击空白区域时 */
            clickBox() {
                let usernameInput = document.getElementById("username-input")
                let passwordInput = document.getElementById("password-input")
                let tip = document.getElementById("tip")
                usernameInput.placeholder = "登录"
                usernameInput.style.width = "100px"
                usernameInput.style.backgroundColor = "rgb(255, 255, 255, 0.2)"
                passwordInput.style.display = "none"
                tip.style.color = "transparent"
            },
            /* 点击搜索时 */
            clickUsername() {
                let usernameInput = document.getElementById("username-input")
                let passwordInput = document.getElementById("password-input")
                let tip = document.getElementById("tip")
                usernameInput.placeholder = ""
                usernameInput.style.width = "200px"
                usernameInput.style.backgroundColor = "rgba(255, 255, 255, 0.6)"
                passwordInput.style.display = "block"
                passwordInput.placeholder = "密码"
                tip.style.color = "transparent"
            },
            /* 点击搜索时 */
            clickPassword() {
                let usernameInput = document.getElementById("username-input")
                let passwordInput = document.getElementById("password-input")
                let tip = document.getElementById("tip")
                usernameInput.placeholder = "用户名"
                passwordInput.placeholder = ""
                tip.style.color = "rgb(255, 255, 255,0.6)"
            },
        }
    }
</script>

<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: absolute;
    height: 100%;
    padding: 0 0;
    margin: 0 0;
    z-index: 999;
}

.login-box {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 25px;
    margin: auto;

}

#backimg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    transition: 0.2s;
}

#box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#logo {
    cursor: default;
    user-select: none;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: lighter;
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    margin: auto;
}

.img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#username-input,
#password-input {
    background: none;
    outline: none;
    border: none;
    display: block;
    width: 100px;
    height: 35px;
    line-height: 45px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(35% + 50px);
    margin: auto;
    font-size: 15px;
    padding: 0 50px;
    letter-spacing: 1px;
    font-weight: lighter;
    font-size: 14px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(5px) brightness(100%);
    transition: 0.25s;
}

#password-input {
    display: none;
    top: calc(35% + 100px);
    width: 200px;
    background-color: rgba(255, 255, 255, 0.6);
}

#password-input::placeholder,
#username-input::placeholder {
    color: rgb(218, 218, 218);
}

#username-input:hover {
    width: 200px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;

}

#tip {
    cursor: default;
    width: 350px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: lighter;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(65% - 200px);
    margin: auto;
    transition: 0.5s;
}
</style>
